<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    
    <!-- <btns @exec="exec"></btns> -->
    <div inline
       class="mgt-18"
       v-if="btns.length>0">
      <el-button plain
                size="small"
                @click="exec(v.btnCode)"
                v-for="(v,i) in btns"
                :key="i"
                :type="v.btnCode=='del'?'danger':''">{{v.btnName}}</el-button>
    </div>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">标签列表</div>
      </div>
      <el-table :data="tableData" style="width: 100%" @selection-change="tableSelectionChange" row-key="ifId" border lazy :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="selection" width="80"> </el-table-column>
        <!-- <el-table-column prop="titleId" label="标签id" >
        </el-table-column> -->
        <!-- <el-table-column prop="userId" label="名师id">
        </el-table-column> -->
        <el-table-column prop="content" label="标签内容">
        </el-table-column>
      </el-table>
    </div>
    <!--新增修改界面-->
    <el-dialog title="新增标签" :visible.sync="addFormVisible">
      <el-form :model="addForm" ref="addForm" :rules="rules">
        <el-form-item label="标签内容" :label-width="formLabelWidth" prop="title">
          <el-input v-model="addForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAdd">取 消</el-button>
        <el-button type="primary" @click="addTag('addForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增修改界面-->
    <el-dialog title="修改标签" :visible.sync="updateFormVisible">
      <el-form :model="addForm" ref="addForm" :rules="rules">
        <el-form-item label="标签内容" :label-width="formLabelWidth" prop="title">
          <el-input v-model="addForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAdd">取 消</el-button>
        <el-button type="primary" @click="updateTag('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
import mixins from '@/utils/mixins'
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";

export default {
  mixins: [mixins],
  components: {
    btns,
    breadcrumbs,
  },
  data() {
    return {
      id:'',
      tableData: [],
      addFormVisible:false,
      updateFormVisible:false,
      formLabelWidth: "120px",
      addForm:{},
      rules: {
        "content": [{
          required: true,
          message: '请输入标签内容',
          trigger: 'blur'
        }],
      },
      btns:[
        {btnCode:'add',btnName:'添加'},
        {btnCode:'update',btnName:'修改'},
        {btnCode:'del',btnName:'删除'},
      ]
    }
  },
  created() {
    this.id=this.$route.query.id || "";
    this.orderList();
  },
  methods: {
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    add() {
      this.addFormVisible = true;
      this.addForm = {};
    },
    update() {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.addForm = this.tableSelection[0];
      this.updateFormVisible = true;
    },
    del() {
      if (this.tableSelection.length < 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.delTag()
    },
    clearAdd(){
      this.addFormVisible = false;
      this.addForm = {};
    },
    addTag(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.teacher.addTeachTitle({
              content:this.addForm.content,
              userId: this.id,
            }).then(d => {
              if (d.code == 200) {
                this.addFormVisible = false;
                this.$refs[formName].resetFields();
                this.$message.success('添加成功！');
                this.orderList();
              } else {
                this.$message.error(d.msg);
              }
          }).catch(e => {
            console.log(e);
          })
        }
      })
    },
    updateTag(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.teacher.editTeachTitle({
              content:this.addForm.content,
              titleId: this.tableSelection[0].titleId,
            }).then(d => {
              if (d.code == 200) {
                this.updateFormVisible = false;
                this.$refs[formName].resetFields();
                this.$message.success('修改成功！');
                this.orderList();
              } else {
                this.$message.error(d.msg);
              }
          }).catch(e => {
            console.log(e);
          })
        }
      })
    },
    delTag(formName) {
      let ids = this.tableSelection.map((e) => {
        return e.titleId
      })
      this.$api.teacher.delTeachTitle({
          titleIds: ids.join(','),
        }).then(d => {
          if (d.code == 200) {
            this.$message.success('删除成功！');
            this.orderList();
          } else {
            this.$message.error(d.msg);
          }
      }).catch(e => {
        console.log(e);
      })
    },
    search() {
      this.orderList();
    },
    orderList() {
      this.$api.teacher.getTeacherTitleList({
          userId: this.id,
        }).then(d => {
        this.tableData = d.data;
        this.total = d.totalCount;
      }).catch(e => {
        console.log(e);
      })
    },
    handleReset() {
      this.searchForm = {
        keyword: '',
      }
      this.endTimee = "",
        this.beginTimee = "",
        this.search();
    },

  }
}
</script>
<style scoped>
.top-box {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-right: 100px;
}
.top-icon {
  width: 30%;
  height: 30%;
  margin-right: 30px;
  margin-left: 30px;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}
.f18 {
  font-size: 25px;
  font-weight: 700;
}
.mgb-20 {
  font-size: 16px;
}
</style>
